<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, toRefs, watch } from 'vue';

import {
  ElArrowLeft,
  ElArrowRight,
  ElSwitchButton,
  ElVideoPause,
  ElVideoPlay,
} from '@vben/icons';

const props = defineProps({
  isControlShow: {
    type: Boolean,
    default: true,
  },
  title: {
    type: String,
    default: 'untitled',
  },
  groupLayerId: {
    type: String,
    default: '',
  },
  timeInterval: {
    type: Number,
    default: 500,
  },
  loop: {
    type: Boolean,
    default: false,
  },
  fitExtent: {
    type: Boolean,
    default: false,
  },
  layerList: {
    type: Array<any>,
    default: [],
  },
});
const emit = defineEmits(['closeAnimation', 'changeFrame']);
const {
  isControlShow,
  groupLayerId,
  timeInterval,
  loop,
  fitExtent,
  layerList,
} = toRefs(props);
const isPlaying = ref(true);
const frameCount = ref(layerList.value.length);
const currentLayerIndex = ref(1);
const currentDescription = ref('2020-11-11 12:00:00');
let animationTimer = null as any;

const play = () => {
  animationTimer && clearInterval(animationTimer);
  animationTimer = setInterval(() => {
    if (isPlaying.value) {
      currentLayerIndex.value =
        (currentLayerIndex.value + 1) % frameCount.value;
      if (currentLayerIndex.value === 0) {
        currentLayerIndex.value = frameCount.value;
        if (!loop.value) {
          clearInterval(animationTimer);
          animationTimer = null;
          isPlaying.value = false;
        }
      }
      emit(
        'changeFrame',
        layerList.value[currentLayerIndex.value - 1].id,
        groupLayerId.value,
        fitExtent.value,
      );

      currentDescription.value =
        layerList.value[currentLayerIndex.value - 1].description;
    }
  }, timeInterval.value);
};

const togglePlayPause = () => {
  isPlaying.value = !isPlaying.value;
  if (isPlaying.value && !animationTimer) {
    // currentLayerIndex.value = 1
    play();
  }
};

const lastFrame = () => {
  currentLayerIndex.value =
    ((currentLayerIndex.value - 2 + frameCount.value) % frameCount.value) + 1;
  emit(
    'changeFrame',
    layerList.value[currentLayerIndex.value - 1].id,
    groupLayerId.value,
    fitExtent.value,
  );
};

const nextFrame = () => {
  currentLayerIndex.value = (currentLayerIndex.value % frameCount.value) + 1;
  emit(
    'changeFrame',
    layerList.value[currentLayerIndex.value - 1].id,
    groupLayerId.value,
    fitExtent.value,
  );
};

const closeAnimation = () => {
  emit('closeAnimation', groupLayerId.value);
};
watch(
  () => timeInterval.value,
  () => {
    play();
  },
);
onMounted(() => {
  currentDescription.value =
    layerList.value[currentLayerIndex.value - 1].description;
  play();
});
onBeforeUnmount(() => {
  clearInterval(animationTimer);
});
</script>

<template>
  <div class="control-container" v-if="isControlShow">
    <div class="title">
      <!-- <span>淹没过程</span> -->
      <span>{{ title }}</span>
      <div class="close-btn-box">
        <el-icon size="15" title="关闭动画" @click="closeAnimation">
          <ElSwitchButton />
        </el-icon>
      </div>
    </div>
    <div class="play-body">
      <div class="buttons">
        <el-icon @click="lastFrame">
          <ElArrowLeft />
        </el-icon>
        <el-icon size="21" v-if="!isPlaying" @click="togglePlayPause">
          <ElVideoPlay />
        </el-icon>
        <el-icon size="21" v-else @click="togglePlayPause">
          <ElVideoPause />
        </el-icon>
        <el-icon @click="nextFrame">
          <ElArrowRight />
        </el-icon>
      </div>
      <div class="progress">
        <el-slider
          v-model="currentLayerIndex"
          :step="1"
          :min="1"
          :max="frameCount"
          show-stops
          size="small"
        />
      </div>
    </div>
    <div class="frame-count">
      <span>{{ currentLayerIndex }}/{{ frameCount }}</span>
    </div>
    <div class="frame-info">
      <span>{{ currentDescription }}</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.control-container {
  box-sizing: border-box;
  width: 350px;
  height: 125px;
  background-color: rgba($color: #05286c, $alpha: 100%);
  border: 1px solid #2cd5ff;
  border-radius: 10px;
}

.title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 30px;
  border-bottom: #6f99ed 1px solid;
  border-radius: 10px 10px 0 0;
  box-shadow: #6f99ed 0 0 10px;

  span {
    display: inline-block;
    padding: 5px 0;
    font-size: 14px;
    color: #19e8fe;
  }

  .close-btn-box {
    position: absolute;
    right: 5px;
    width: 25px;
    height: 100%;
    // color: rgb(63, 158, 255);
    color: aliceblue;
    cursor: pointer;

    .el-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    & .el-icon:hover {
      color: #48a2ff;
    }
  }
}

.play-body {
  display: flex;
  align-items: center;
  width: 100%;
  height: 35px;
  padding-top: 10px;

  .buttons {
    display: flex;
    flex: 1;
    justify-content: space-between;
    padding: 0 10px;
    font-size: 20px;
    color: white;

    .el-icon:not(:nth-child(2)) {
      box-sizing: border-box;
      border: 1px solid #6f99ed;
      border-radius: 50%;
    }

    & .el-icon:hover {
      // transform: scale(1.2);
      color: #48a2ff;
      cursor: pointer;
    }
  }

  .progress {
    flex: 2;
    padding: 0 12px;
  }
}

.frame-count {
  width: 100%;
  height: 20px;

  span {
    display: inline-block;
    width: 100%;
    font-size: 14px;
    line-height: 20px;
    color: #19e8fe;
    text-align: center;
  }
}

.frame-info {
  width: 100%;
  height: 20px;

  span {
    display: inline-block;
    width: 100%;
    padding-top: 5px;
    font-size: 13px;
    line-height: 20px;
    color: aliceblue;
    text-align: center;
  }
}
</style>
